<template>
  <div id="app">
    <router-view></router-view>
    <div v-show="isShow">
      <van-tabbar v-model="active" @change="change" style="padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);">
        <van-tabbar-item class="bottab" to='/'><span class="iconfont icon-zu"></span><p>首页</p></van-tabbar-item>
        <van-tabbar-item class="bottab" to='/FQPol'><span class="iconfont icon-wodebaodan"></span><p>保单</p></van-tabbar-item>
        <van-tabbar-item class="bottab" to='/BaiFenCenter'><span class="iconfont icon-wode"></span><p>我的</p></van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<style src="./css/iconfont.css"></style>
<script>
import { Tabbar, TabbarItem } from 'vant';
export default {
    name: 'app',
    components: {
        [Tabbar.name]: Tabbar,
        [TabbarItem.name]: TabbarItem,
    },
    computed:{
      isShow () {
        if(this.$route.path=="/" || this.$route.path=="/FQPol" || this.$route.path=="/BaiFenCenter")
        return true
        else
        return false
      },
    },
    data() {
        return {
            active:0
        }
    },
    updated(){
        if(this.$route.path=="/"){
          this.active = 0
        }else if(this.$route.path=="/FQPol"){
          this.active = 1
        }else if(this.$route.path=="/BaiFenCenter"){
          this.active = 2
        }
    },
    methods:{
        change(p){
          if(p == 0){
            this.active = 0
          }else if(p == 1){
            this.active = 1
          }else if(p == 2){
            this.active = 2
          }
        }
    }
}
</script>
<style>
body {
  background-color: #efeff4;
  font-family:'Microsoft YaHei';
  margin:0;
}
#app{
  height:100%;
}
.bottab{
  text-align:center;
}
.bottab span{
  font-size:24px
}
.bottab p{
  margin:5px 0
}
</style>
